<template>
    <el-header height="100" class="header">
        <div class="col-left">
            <img :height="iconheight ? iconheight : 72" :src="logosrc" />
        </div>
        <div class="col title">
            <span class="beiji" :style="{ fontSize: titlesize ? titlesize : '48px' }">{{ title }}</span>
        </div>
        <div class="col-right">
            <div class="row col-right-1">
                <div class="col-right-2">
                    <div class="time1 "> {{ dayjs(timestamp).format('HH:mm:ss') }} </div>
                    <div class="time2 ">
                        <span class="year"> {{ dayjs(timestamp).format('DD/MM/YYYY') }}</span>
                        <span class="week"> 星期{{ week[dayjs(timestamp).get('day')] }}</span>
                    </div>
                </div>
                <div class="col-right-3" v-if="!mydata">
                    <div class="time1 ">
                        <router-link :to="{ name: '登录' }" custom v-slot="{ navigate }">
                            <el-button @click="() => { logout(); navigate() }" type="primary"
                                class="el-botton">退出</el-button>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </el-header>
</template>

<script setup lang="ts">
import { useIntervalFn, useTimestamp } from '@vueuse/core';
import dayjs from 'dayjs';
import { computed, inject, onMounted, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { asynclogout } from '../../api';
import { Storekey } from '../../interface';
import Studycodemodel from '../../mysql_interface/studycodemodel';

const p = defineProps<{ scienceuser: Studycodemodel.Iscienceuser[], mydata?: boolean }>()
const store = useStore(Storekey)
const logosrc = inject<string>('icon')

const title = inject<string>('title')
const titlesize = inject<string>('titlesize')
const iconheight = inject<string>('iconheight')

const timestamp = useTimestamp({ offset: 0 })
const week = ['天', '一', '二', '三', '四', '五', '六']
onMounted(() => {
    t.value = !!p.scienceuser.find(t => t.isadmin)
    start()

})

const user = computed(() => {
    return store.state.user?.name
})

const t = ref(false)

watch(() => p.scienceuser, e => {
    t.value = !!e.find(t => t.isadmin)
})


function logout() {
    asynclogout()
}

function start() {
    window.AMap.plugin('AMap.Weather', function () {
        //创建天气查询实例
        new window.AMap.Weather().getLive('北京市', function (err: string, data: any) {
            console.log(err)
            if (!err) {
                weather.value = data
            }
        });

    });
}


const { pause, resume, isActive } = useIntervalFn(() => {
    start()
}, 1000 * 60 * 60)


const srcs = [
    {
        type: ['晴', '有风', '平静', '未知', '热', '冷', '微风', '和风', '清风'],
        src: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Sunny.png'
    },
    {
        type: ['少云', '晴间多云', '多云', '阴', '霾', '中度霾', '重度霾', '严重霾', '浮尘', '扬沙', '沙尘暴', '强沙尘暴', '雾', '浓雾', '强浓雾', '轻雾', '大雾', '特强浓雾'],
        src: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Sunny.png'
    },
    {
        type: ['阵雨', '雷阵雨', '雷阵雨并伴有冰雹', '小雨', '中雨', '大雨', '暴雨', '大暴雨', '特大暴雨', '强阵雨', '强雷阵雨', '极端降雨', '毛毛雨/细雨', '雨', '小雨-中雨', '中雨-大雨', '大雨-暴雨', '暴雨-大暴雨', '大暴雨-特大暴雨', '冻雨'],
        src: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Rain.png'
    },
    {
        type: ['雪', '雨雪天气', '雨夹雪', '阵雨夹雪', '雪', '阵雪', '小雪', '中雪', '大雪', '暴雪', '小雪-中雪', '中雪-大雪', '大雪-暴雪'],
        src: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Snow.png'
    },
    {
        type: ['有风', '疾风', '大风', '烈风', '风暴', '狂爆风', '飓风', '热带风暴', '龙卷风'],
        src: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Wind.png'
    }
]
const src = computed(() => {
    const data = srcs.find(e => e.type.includes(weather.value.weather))
    if (data) {
        return data.src
    }
    return 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Blowing-snow.png'
})



const weather = ref({
    "province": "北京",
    "city": "北京市",
    "adcode": "110000",
    "weather": "晴",
    "temperature": 8,
    "windDirection": "西北",
    "windPower": "≤3",
    "humidity": "16",
    "reportTime": "2023-01-06 16:38:43",
    "info": "OK"
})

</script>

<style scoped>
.header {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    --bs-gutter-x: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.beiji {
    color: #fff;
    font-size: 48px;
    font-weight: 700
}

.col-left {
    width: 640px;
}

.col-left img .col-right {
    width: 640px;
}

.time1 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.year {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    line-height: 14px;
    width: 103px;
    display: inline-block;
}

.week {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    align-items: center;
    text-align: center;
    color: #B3B5B7;
    display: inline-block;

    width: 72px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.temperature {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-align: left;
    position: relative;
}

.col-right-1 {
    width: 400px;
    margin-left: auto;
    margin-right: 0;
}

.text-right {
    text-align: right;
}

.temperature-c {
    font-size: 14px;
    display: inline-block;
    position: absolute;
    top: 10px;
    height: 24px;
}

.col-right-2 {
    width: 220px;
}

.col-right-3 {
    width: 178px;
}

.el-botton {
    --color-43: #545E72;
}

.time2 {
    color: #fff;
}

.ml-2 {
    margin-left: 12px;
}
</style>